<template>
	<view class="skill root-container">
		
		<view class="content">
			<view class="form">
				<uv-text text="基础信息" bold color="#333" size="30rpx"/>
				<uv-form
					ref="formRef"
					:model="model" :rules="rules" 
					labelWidth="180rpx" :labelStyle="{fontSize: '28rpx'}"
				>
					<uv-form-item label="真实姓名" prop="real_name" borderBottom required>
						<uv-input v-model="model.real_name" border="none" placeholder="请输入真实姓名"  />
					</uv-form-item>
					<uv-form-item label="手机号" prop="tel" borderBottom required>
						<uv-input v-model="model.tel" border="none" placeholder="请输入手机号"  />
					</uv-form-item>
					<uv-form-item label="身份证号" prop="id_card_number" borderBottom required>
						<uv-input v-model="model.id_card_number" border="none" placeholder="请输入身份证号" />
					</uv-form-item>
					<uv-form-item label="简历头像" prop="resume_avatar" borderBottom required>
						<lst-upimg 
							@success="avatarSuccess"
							:list="model.resume_avatar" name="头像"
						/>
					</uv-form-item>
					<uv-form-item label="主体类型" prop="principal_type" borderBottom required>
						<uv-radio-group v-model="model.principal_type" activeColor="#D32D26"  >
							<uv-radio label="个人" :name="1" :customStyle="{margin: '8px'}" />
							<uv-radio label="服务商" :name="2" :customStyle="{margin: '8px'}" />
						</uv-radio-group>
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="接单社区" prop="community_id" borderBottom required @click="open('社区')">
						<uv-input v-model="community" border="none" placeholder="请输入接单社区" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="意向行业" prop="skill_category_ids" borderBottom required @click="open('行业')">
						<uv-input v-model="skill_category" border="none" placeholder="请输入意向行业" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="工作性质" prop="nature_of_work" borderBottom required @click="open('性质')">
						<uv-input v-model="nature_of_work" border="none" placeholder="请输入工作性质" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="工作经验" prop="experience_years" borderBottom required>
						<uv-input v-model="model.experience_years" border="none" placeholder="请输入工作经验" />
					</uv-form-item>
					<uv-form-item label="学历" prop="education" borderBottom required @click="open('学历')">
						<uv-input v-model="education" border="none" placeholder="请输入学历" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
				</uv-form>
			</view>
		</view>
		
		<view class="content" style="padding-top: 0;">
			<view class="form1">
				<uv-text text="工作经历" bold color="#333" size="30rpx"  />
				<uv-gap height="10" bgColor="transparent" />
				<uv-textarea v-model="model.work_experience" placeholder="请填写工作经历" count  />
			</view>
		</view>
		
		<view class="content" style="padding-top: 0;">
			<view class="form1">
				<uv-text text="个人简历" bold color="#333" size="30rpx"  />
				<uv-gap height="10" bgColor="transparent" />
				<uv-textarea v-model="model.personal_resume" placeholder="请简要介绍自己(比如您会做什么/工作经历/期望薪资等),有助于您更快找到好工作。" count />
			</view>
		</view>
		
		<view class="content" style="padding-top: 0;">
			<view class="form1">
				<uv-text prefixIcon="*" text="证件照片" bold color="#333" size="30rpx" iconStyle="color: #E47470" />
				<uv-row gutter="30rpx" customStyle="flex-wrap: wrap">
					<uv-col span="6">
						<view class="item">
							<lst-upimg 
								:type="4"
								
								@success="e => upimgSuccess(e, '正面')"
								:list="model.card_face" name="正面"
							>
								<uv-image src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png' height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="身份证人像面" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
					<uv-col span="6">
						<view class="item">
							<lst-upimg 
								:type="4"
								
								@success="e => upimgSuccess(e, '反面')"
								:list="model.card_bg" name="反面"
							>
								<uv-image src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png' height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="身份证国徽面" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
					<uv-col span="12">
						<view class="item">
							<lst-upimg 
								:type="4" name="证书"
								multiple :maxCount="50"
								:list="model.certification_info"
								
								@success="e => upimgSuccess(e, '证书')" 
							>
								<view v-if="model.certification_info.length === 0">
									<uv-image src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png' height="60" mode="aspectFit" />
									<uv-gap height="8" bgColor="transparent" />
									<uv-text text="专业证书" color="#333" size="24rpx" align="center" />
								</view>
							</lst-upimg>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
		<view class="approved-reason" v-if="approvedStatus==2">当前申请审核未通过，拒绝原因：{{approvedReason}}，请修改后重新提交。</view>
		<view class="form2">
			<view class="btn" @click="submit">{{ buttonText }}</view>
			<uv-gap height="10" bgColor="transparent" />
			<view class="flex align-center justify-center">
				<uv-checkbox-group v-model="checkbox" activeColor="#D32D26" inactiveColor="#D32D26" class="checkbox">
					<uv-checkbox :customStyle="{marginBottom: '8px'}" label="已阅读并同意《邻事通技工注册协议》" :name="1" />
				</uv-checkbox-group>
			</view>
		</view>

		<uv-gap height="5" bgColor="transparent" />
		
		<uv-picker ref="xlpicker" :columns="xueli" @confirm="xlpickerVal" confirmColor="#D32D26" />
		<uv-picker ref="xzpicker" :columns="worker" @confirm="xzpickerVal" confirmColor="#D32D26" />
		
		<uv-popup ref="hangyeRef" mode="bottom" round="10">
			<uv-gap height="10" bgColor="transparent" />
			<uv-text text="意向行业" bold size="30rpx" color="#333" align="center" />
			<view class="popup-content">
				<view class="list">
					<view class="item1" v-for="(e,i) in hangye" :key="i">
						<uv-text :text="e.cate_name" bold size="28rpx" color="#333" />
						<uv-gap height="10" bgColor="transparent" />
						<uv-row gutter="20rpx" customStyle="flex-wrap: wrap">
							<uv-col span="4" v-for="(a,j) in e.child" :key="j">
								<view :class="['tags', isHangye(a.id)]" @click="addHangye(a)">{{ a.cate_name }}</view>
							</uv-col>
						</uv-row>
					</view>
				</view>

				<view class="btn2">
					<uv-button text="确定" color="#D32D26" @click="hyclose" />
				</view>
			</view>
		</uv-popup>
		
		<uv-popup ref="citySelectRef" mode="bottom">
			<view class="citySelect">
				<lst-city-select :level="5" :init="citySelectInit" @select="citySelect"  />
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	
	import { onBackPress } from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		nextTick,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';
	
	import { joinSkill, getIntentionList, joinSkillDetail } from '@/api'
	
	import {
		navigate,
		checkEmptyProperties,
		isEmpty
	} from '@/util/tools.js';
	
	
	const approvedReason = ref('')
	const approvedStatus = ref(null)
	const buttonText = ref('提交资料')
	
	const checkbox = ref([])
	const hangyeAll = ref([])
	const xzpicker = ref(null)
	const xlpicker = ref(null)
	
	const formRef = ref(null)
	const hangyeRef = ref(null)
	const citySelectRef = ref(null)
	const citySelectInit = computed(() => {
		const { community_province_id, community_city_id, community_area_id , community_town_id, community_id } = model
		if(community_province_id && community_city_id && community_area_id  && community_town_id && community_id) {
			return [model.community_province_id, model.community_city_id, model.community_area_id, model.community_town_id, model.community_id]
		} else { 
			return []
		}
	})
	
	// 表单
	const model = reactive({
		real_name: '', // 真实姓名
		tel: '', // 手机号
		id_card_number: '', // 身份证号
		resume_avatar: '', // 简历头像
		principal_type: 1, // 主体类型：1=个人，2=服务商
		community_province_id: '', // 接单社区-省id
		community_city_id: '', // 接单社区-市id
		community_area_id: '', // 接单社区-区县id
		community_town_id: '', // 接单社区-乡镇id
		community_id: '',	// 接单社区-小区id
		skill_category_ids: '', // 意向行业
		nature_of_work: 1, // 工作性质：1=兼职，2=全职
		experience_years: '', // 工作经验（如：10年）
		education: 0, // 学历：0=小学，1=初中，2=中专，3=高中，4=大专，5=本科，6=研究生，7=博士生
		work_experience: '', // 工作经历
		personal_resume: '', // 个人简历
		card_face: '', // 身份证正面
		card_bg: '', // 身份证反面
		certification_info: [], // 专业证书：[{"name": "电工证", "url": "..."}, {"name": "瓦工证", "url": "..."}...]
		is_read_agreement: 1, // 是否阅读协议：0=否，1=是
	})
	
	// 校验
	const rules = {
		real_name: { type: 'string', required: true, message: '请填写真实姓名', trigger: ['blur', 'change'] },
		tel: { type: 'string', required: true, message: '请填写手机号', trigger: ['blur', 'change'] },
		id_card_number: { type: 'string', required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
		resume_avatar: { type: 'string', required: true, message: '请上传简历头像', trigger: ['blur', 'change'] },
		community_id: { type: 'integer', required: true, message: '请选择接单社区', trigger: ['blur', 'change'] },
		skill_category_ids: { type: 'array', required: true, message: '请选择意向行业', trigger: ['blur', 'change'] },
		experience_years: { type: 'string', required: true, message: '请填写工作经验', trigger: ['blur', 'change'] },
	}
	
	// 分类
	const hangye = ref([])
	const worker = reactive([[ "兼职", "全职"]])
	const xueli = reactive([[ "小学", "初中", "中专", "高中", "大专", "本科", "研究生", "博士生" ]])
	
	// 拼接
	const community = ref('') // 接单社区拼接
	const skill_category = ref('') // 意向行业拼接

	const nature_of_work = computed(() => ['兼职', '全职'][model.nature_of_work - 1]) // 工作性质拼接
	const education = computed(() => ['小学','初中','中专','高中','大专','本科','研究生','博士生'][model.education]) // 学历拼接
	
	// 选择
	const open = (e) => {
		
		if(e == '性质') xzpicker.value.open()
		if(e == '学历') xlpicker.value.open()
		if(e == '社区'){
			let url = '/pages-public/SelectCityArea/SelectCityArea?select_level=5'
			navigate(url)
			
		} 
		if(e == '行业') hangyeRef.value.open()
	}
	
	const setStatus=()=>{
		if (isEmpty(approvedStatus.value)) {
			return;
		}
		let status = approvedStatus.value * 1
		switch (status) {
			case 2:
				buttonText.value = '重新提交'
				break;
			default:
				buttonText.value = '提交资料'
				break;
		}
	}
	
	// 意向行业
	const hyclose = () => {
		hangyeRef.value.close()
		const id = hangyeAll.value.map(e => e.id)
		const name = hangyeAll.value.map(e => e.cate_name)
		skill_category.value = name.join(',')
		model.skill_category_ids = id
	}
	const isHangye = computed((id) => {
		return (id) => {
			const i = hangyeAll.value.findIndex((e) => e.id === id)
			return i > -1 ? 'tags_active' : ''
		}
	})
	const addHangye = (e) => {
		const i = hangyeAll.value.findIndex((a) => a.id === e.id)
		i > -1 ? hangyeAll.value.splice(i, 1) : hangyeAll.value.push(e)
	}
	// 学历
	const xlpickerVal = (e) => model.education = e.indexs[0]
	// 工作性质
	const xzpickerVal = (e) => model.nature_of_work = e.indexs[0] + 1
	// 简历头像
	const avatarSuccess = (e) => model.resume_avatar = e.length === 0 ? '' : e[0].src
	
	// 选择接单社区
	const citySelect = (e) => {
		citySelectRef.value.close()
		if(e) {
			community.value = e.map(e => e.name).join('/')
			model.community_province_id = e[0].id 	// 接单社区-省id
			model.community_city_id = e[1].id 		// 接单社区-市id
			model.community_area_id = e[2].id 		// 接单社区-区县id
			model.community_town_id = e[3].id 		// 接单社区-乡镇id
			model.community_id = e[4].id			// 接单社区-小区id
		}
	}
	
	// 上传图片
	const upimgSuccess = (fileList, type) => {
		if(type === '反面') model.card_bg = fileList.length === 0 ? '' : fileList[0].src
		if(type === '正面') model.card_face = fileList.length === 0 ? '' : fileList[0].src
		if(type === '证书') model.certification_info = fileList.length === 0 ? [] : fileList.map((e, i) => e.src)
	}
	
	
	// 提交
	const submit = async () => {
		
		
		if(checkbox.value.length === 0) return uni.$uv.toast('请先同意协议')
		await formRef.value.validate()
		uni.showLoading({ title: '提交中', mask: true })
		const res = await joinSkill(model)
		buttonText.value = '等待审核'
		
		uni.hideLoading()
		uni.$uv.toast('提交成功')
	}
	
	// 监听后退
	onBackPress(e => {
		if(citySelectRef.value.showPopup) {
			citySelectRef.value.close()
			return true
		}
	})
	// 获取意向行业
	const getIntention = async () => {
		const { result } = await getIntentionList()
		hangye.value = result
	}
	
	const skillDetail = async () => {
		uni.showLoading({ title: '加载中', mask: true })
		const { result } = await joinSkillDetail()
		if(!result.id) return uni.hideLoading()
		model.id = result.id
		model.real_name = result.real_name
		model.tel = result.tel
		model.id_card_number = result.id_card_number
		model.resume_avatar = result.resume_avatar
		model.principal_typ = result.principal_typ
		model.community_province_id = result.community_province_id
		model.community_city_id = result.community_city_id
		model.community_area_id = result.community_area_id
		model.community_town_id = result.community_town_id
		model.community_id = result.community_id
		model.skill_category_ids = result.skill_category_ids
		model.nature_of_wor = result.nature_of_wor
		model.experience_years = result.experience_years
		model.educatio = result.educatio
		model.work_experience = result.work_experience
		model.personal_resume = result.personal_resume
		model.card_face = result.card_face
		model.card_bg = result.card_bg
		model.certification_info = result.certification_info
		model.is_read_agreemen = result.is_read_agreemen
		skill_category.value = result.skill_category.map(e => e.cate_name).join(',')
		community.value = result.community_address
		checkbox.value = [1]
		
		
		approvedReason.value = result.approved_reason
		approvedStatus.value = result.approved_status
		setStatus()
		uni.hideLoading()
	}
	
	onMounted(() => {
		// 监听事件
		uni.$on('refreshAreaSelect', (data) => {
		    community.value = data.select;
			model.community_province_id = data.province_id;
			model.community_city_id = data.city_id;
			model.community_area_id = data.area_id;
			model.community_town_id = data.town_id
			model.community_id = data.community_id
		})
	})
	
	onUnmounted(() => {
		// 页面卸载时取消监听，避免内存泄漏
		uni.$off('refreshAreaSelect')
	})
	
	
	const init = async () => {
		getIntention()
		skillDetail()
	}
	
	init()
</script>

<style>

</style>

<style lang="scss" scoped>
	
	.approved-reason{
		padding: 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #666;
	}
	.skill{
		position: relative;
		.bg {
			top: 0;
			z-index: 1;
			width: 100%;
			position: absolute;
		}
		.content {
			z-index: 2;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
		}
		.citySelect {
			height: calc(100vh - var(--window-top));
		}
	}
	.form {
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.form1 {
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.form2 {
		padding: 0 30rpx 80rpx 30rpx;
		box-sizing: border-box;
	}
	.item {
		width: 100%;
		display: flex;
		overflow: hidden;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		background-color: #F7F5F8;
		image {
			width: 100%;
			display: block;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}
		:deep(.uv-upload__wrap) {
			justify-content: space-between !important;
		}
	}
	.btn {
		z-index: 10;
		color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 110;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}
	.btn1 {
		z-index: 10;
		color: #fff;
		width: 100%;
		height: 80rpx;
		z-index: 110;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}
	.checkbox {
		z-index: 10;
		position: relative;
		::v-deep .uv-checkbox {
			margin: 0 auto;
			margin-bottom: 16rpx;
		}
	}
	.popup-content {
		display: flex;
		padding: 30rpx;
		overflow: hidden;
		max-height: 70vh;
		flex-direction: column;
		box-sizing: border-box;
		.list {
			flex: 1;
			overflow: auto;
			.item1{
				.tags {
					width: 100%;
					color: #333;
					border-radius: 6rpx;
					padding: 10rpx 0;
					font-size: 26rpx;
					text-align: center;
					margin-bottom: 20rpx;
					background-color: #F7F5F8;
				}
				.tags_active {
					color: #fff !important;
					background-color: #D32D26 !important;
				}
			}
		}
		.btn2 {
			
		}
	}
</style>